<template>
  <div class="report-create-container">
    <div class="page-header">
      <div class="header-content">
        <h2>{{ isEdit ? '编辑' : '创建' }}战术报告</h2>
        <p>创建或编辑战术演练报告</p>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">返回</el-button>
        <el-button @click="saveDraft" :loading="saving">保存草稿</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          {{ isEdit ? '更新' : '发布' }}
        </el-button>
      </div>
    </div>

    <div class="form-wrapper">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        
      >
        <el-card title="基本信息" class="form-card">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="报告标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入报告标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报告类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择报告类型">
                  <el-option label="演练报告" value="exercise" />
                  <el-option label="评估报告" value="assessment" />
                  <el-option label="总结报告" value="summary" />
                  <el-option label="分析报告" value="analysis" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="报告摘要" prop="summary">
            <el-input
              v-model="form.summary"
              type="textarea"
              :rows="3"
              placeholder="请输入报告摘要"
            />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="演练时间" prop="exerciseTime">
                <el-date-picker
                  v-model="form.exerciseTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与人员" prop="participants">
                <el-input v-model="form.participants" placeholder="请输入参与人员数量" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card title="报告内容" class="form-card">
          <el-form-item label="报告正文" prop="content">
            <div class="editor-container">
              <div class="editor-toolbar">
                <el-button-group>
                  <el-button size="small" @click="insertTemplate('objective')">插入目标</el-button>
                  <el-button size="small" @click="insertTemplate('process')">插入过程</el-button>
                  <el-button size="small" @click="insertTemplate('result')">插入结果</el-button>
                  <el-button size="small" @click="insertTemplate('conclusion')">插入结论</el-button>
                </el-button-group>
              </div>
              <el-input
                v-model="form.content"
                type="textarea"
                :rows="15"
                placeholder="请输入报告正文内容..."
                class="content-editor"
              />
            </div>
          </el-form-item>
        </el-card>

        <el-card title="附加信息" class="form-card">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="评分" prop="score">
                <el-rate v-model="form.score" :max="5" allow-half />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择状态">
                  <el-option label="草稿" value="draft" />
                  <el-option label="已发布" value="published" />
                  <el-option label="已归档" value="archived" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="标签">
            <el-input
              v-model="form.tags"
              placeholder="多个标签用逗号分隔"
            />
          </el-form-item>
          
          <el-form-item label="附件">
            <el-upload
              class="upload-demo"
              drag
              :multiple="true"
              :auto-upload="false"
              :file-list="fileList"
              @change="handleFileChange"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                拖拽文件到此处或 <em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持上传图片、文档等相关附件
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 响应式数据
const formRef = ref()
const submitting = ref(false)
const saving = ref(false)
const isEdit = ref(false)
const fileList = ref([])

// 表单数据
const form = reactive({
  title: '',
  type: '',
  summary: '',
  content: '',
  exerciseTime: [],
  participants: null,
  score: 4,
  status: 'draft',
  tags: ''
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入报告标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择报告类型', trigger: 'change' }
  ],
  summary: [
    { required: true, message: '请输入报告摘要', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入报告正文', trigger: 'blur' },
    { min: 50, message: '报告正文至少需要50个字符', trigger: 'blur' }
  ]
}

// 报告模板
const templates = {
  objective: `
## 演练目标
1. 验证应急响应流程的有效性
2. 测试团队协作能力
3. 评估安全防护措施的可靠性
4. 发现和改进安全漏洞

`,
  process: `
## 演练过程
### 第一阶段：准备阶段
- 确定演练目标和范围
- 分配角色和责任
- 准备必要的工具和环境

### 第二阶段：执行阶段
- 按照预定计划执行攻击场景
- 监控和记录关键事件
- 收集相关数据和证据

### 第三阶段：总结阶段
- 分析演练结果
- 评估目标达成情况
- 记录经验教训

`,
  result: `
## 演练结果
### 成功完成的目标
- [ ] 目标1：描述完成情况
- [ ] 目标2：描述完成情况
- [ ] 目标3：描述完成情况

### 发现的问题
1. **问题描述**：具体问题说明
   - 影响程度：高/中/低
   - 解决建议：具体改进措施

2. **问题描述**：具体问题说明
   - 影响程度：高/中/低
   - 解决建议：具体改进措施

`,
  conclusion: `
## 结论与建议
### 总体评价
本次演练整体表现良好，达到了预期目标...

### 改进建议
1. **技能提升**：建议加强...
2. **流程优化**：建议改进...
3. **工具完善**：建议补充...

### 下一步计划
1. 制定整改计划
2. 安排专项培训
3. 更新应急预案
4. 计划下次演练

`
}

// 生命周期
onMounted(() => {
  const id = route.query.id
  if (id) {
    isEdit.value = true
    loadReportData(id)
  }
})

// 方法
const loadReportData = async (id) => {
  try {
    // 模拟加载数据
    const mockData = {
      title: '2024年第一季度红蓝对抗演练报告',
      type: 'exercise',
      summary: '本报告总结了第一季度进行的红蓝对抗演练活动，包括演练过程、发现问题和改进建议。',
      content: '演练于2024年1月15日至17日进行，共有24名安全专家参与...',
      exerciseTime: [new Date('2024-01-15 09:00:00'), new Date('2024-01-17 18:00:00')],
      participants: 24,
      score: 4.5,
      status: 'published',
      tags: '红蓝对抗,网络安全,演练'
    }
    
    Object.assign(form, mockData)
  } catch (error) {
    ElMessage.error('加载报告数据失败')
  }
}

const insertTemplate = (type) => {
  if (templates[type]) {
    form.content += templates[type]
    ElMessage.success('模板已插入')
  }
}

const handleFileChange = (file, files) => {
  fileList.value = files
}

const saveDraft = async () => {
  saving.value = true
  try {
    // 模拟保存草稿
    await new Promise(resolve => setTimeout(resolve, 1000))
    form.status = 'draft'
    ElMessage.success('草稿保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success(isEdit.value ? '更新成功' : '发布成功')
    goBack()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}

const goBack = () => {
  router.push('/tactical-report/list')
}
</script>

<style lang="scss" scoped>
.report-create-container {
  padding: 20px;
  background-color: var(--bg-color);
}

  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.form-wrapper {
  .form-card {
    margin-bottom: 20px;
    
    :deep(.el-card__header) {
      background-color: var(--bg-color-secondary);
      font-weight: 600;
    }
  }
}

.editor-container {
  .editor-toolbar {
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--bg-color-secondary);
    border-radius: 4px;
  }

  .content-editor {
    :deep(textarea) {
      font-family: 'Monaco', 'Consolas', monospace;
      line-height: 1.6;
    }
  }
}

.upload-demo {
  width: 100%;
  
  :deep(.el-upload-dragger) {
    width: 100%;
    height: 120px;
  }
}
</style> 